import { ProjectList } from "./project-list";
import { useAuthContextHook } from "../contexts/auth-context";
import styled from "@emotion/styled";
import { Row, ButtonNoPadding } from "../components/lib";
import { ReactComponent as SoftwareLogo } from "@/assets/software-logo.svg"; //svg方式引入，可以设置大小颜色
import { Button, Dropdown, Menu } from "antd";
import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
import { ProjectDetailView } from "./project-detail";
import { resetRouter } from "../utils";
import { ProjectPopover } from "../components/project-popover";
import { useState } from "react";
import { ProjectModal } from "./project-list/project-modal";
import { useProjectModal } from "./project-list/util";

export const IndexView = () => {
  //添加项目的state
  // const [showModal, setShowModal] = useState(false);
  return (
    <Container>
      <BrowserRouter>
        {/* <PageHeader
          projectButton={<ProjectButton onChangeProjectModal={setShowModal} />}
        /> */}
        <PageHeader projectButton={<ProjectButton />} />
        <Routes>
          {/* <ProjectList /> */}
          <Route
            path="/projects"
            element={
              // <ProjectList
              //   projectButton={
              //     <ProjectButton onChangeProjectModal={setShowModal} />
              //   }
              // />
              <ProjectList />
            }
          />
          <Route
            path="/projects/:projectId/*"
            element={<ProjectDetailView />}
          />
          {/* 重定向根路径到项目列表 */}
          <Route path="/" element={<Navigate to="/projects" />} />
        </Routes>
        {/* <ProjectModal visible={showModal} onClose={() => setShowModal(false)} /> */}
        <ProjectModal />
      </BrowserRouter>
    </Container>
  );
};

const Container = styled.div`
  display: grid;
  grid-template-rows: 6rem calc(100vh - 6rem);
`;
const Header = styled(Row)`
  padding: 3.2rem;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  z-index: 1;
`;
const HeaderLeft = styled(Row)``; //这里的``必须加上不然会报错

const PageHeader = (props: { projectButton: JSX.Element }) => {
  const { user, loginOut } = useAuthContextHook();
  return (
    <Header between>
      <HeaderLeft gap={true}>
        <ButtonNoPadding type="link" onClick={resetRouter}>
          <SoftwareLogo width="18rem" color="rgb(38,132,255)" />
        </ButtonNoPadding>
        <ProjectPopover projectButton={props.projectButton} />
        <span>用户</span>
      </HeaderLeft>
      <Dropdown
        overlay={
          <Menu>
            <Menu.Item key="1">
              <Button type="link" onClick={loginOut}>
                登出
              </Button>
            </Menu.Item>
          </Menu>
        }
      >
        <Button type="link">Hi,{user?.name}</Button>
      </Dropdown>
    </Header>
  );
};

//项目编辑按钮
// const ProjectButton = (props: {
//   onChangeProjectModal: (state: boolean) => void;
// }) => {
//   return (
//     <ButtonNoPadding
//       type="link"
//       onClick={() => props.onChangeProjectModal(true)}
//     >
//       创建项目
//     </ButtonNoPadding>
//   );
// };
const ProjectButton = () => {
  const { open } = useProjectModal();
  return (
    <ButtonNoPadding type="link" onClick={open}>
      创建项目
    </ButtonNoPadding>
  );
};
